<template>
<div class="father">
    <h3>父组件</h3>
    <p>房产数量:{{ a }}</p>
    <p>b:{{ b }}</p>
    <p>c:{{ c }}</p>
    <el-button @click="changeToy">变更玩具</el-button>
    <el-button @click="changeComputer">变更电脑</el-button>
    <el-button @click="getChildren($refs)">给孩子买书</el-button>
    <div class="row">
        <Child ref="c1"/>
        <Other ref="c2"/>
    </div>
</div>
</template>

<script lang="ts" setup name="Father">
import { ref } from 'vue';
import Child from './Child.vue';
import Other from './Other.vue';

let c1 = ref()
let c2 = ref()
let a = ref(100)
let b = ref(10)
let c = ref(1)
function updateB(v:number)
{
    b.value+=v
}
function changeToy(){
    c1.value.toy = "小猪佩奇"
}
function changeComputer(){
    c2.value.computer = "火影"
}
function getChildren(refs:{[key:string]:any}){
    for (let key in refs) {
        refs[key].book += 1
    }
}
defineExpose({a})
</script>

<style scoped>
.father{
    background-color: rgb(164, 164, 164);
    padding: 20px;
    border-radius: 10px;
}
.row{
    display: flex;
}
</style>